let data = [
  {
    id: 1,
    name: "iPhone 15",
    price: 5999,
  },
  {
    id: 2,
    name: "iPhone 15 Pro",
    price: 7999,
  },
  {
    id: 3,
    name: "iPhone 15 Pro Max",
    price: 8999,
  },
];
let table = document.createElement("table");
let thead = document.createElement("thead"); //表头
let tbody = document.createElement("tbody"); //表内容
let tr1 = document.createElement("tr");
let box = document.querySelector(".box");
let btn = document.querySelector(".a");
function draw() {
  thead.append(tr1);
  box.append(table);
  for (const key in data[0]) {
    let th = document.createElement("th"); //头部格
    tr1.append(th);
    th.append(document.createTextNode(key));
  }
  for (const key in data) {
    let tr = document.createElement("tr"); //行
    for (const k in data[key]) {
      let td = document.createElement("td"); //单元格
      td.append(data[key][k]);
      tr.append(td);
    }
    tbody.append(tr);
  }
  table.append(thead);
  table.append(tbody);
}
btn.onclick = draw;
let add = document.querySelector(".add");
let id = document.querySelector(".id");
let name = document.querySelector(".name");
let price = document.querySelector(".price");
add.onclick = function () {
  //存入data里
let  o = {};
  o.id = id.value;
  o.name = name.value;
  o.price = price.value;
  console.log(o);
  data.push(o);
  console.log(data);
  //显示在表格中
  let tr2 = document.createElement("tr");
  for (var i = 0; i < 3; i++) {
    let td = document.createElement("td"); //单元格
    if (i == 0) td.append(id.value);
    if (i == 1) td.append(name.value);
    if (i == 2) td.append(price.value);
    tr2.append(td);
    console.log(td);
  }
  tbody.append(tr2);
  table.append(tbody);
};
